<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item name="1">
      <!-- 自定义标题 -->
      <template #title>
        <div class="custom-title">
          <p>这是第一行</p>
          <p>这是第二行</p>
          <p>这是第三行</p>
        </div>
      </template>
      <!-- 默认插槽 -->
      <div>
        这里是自定义的内容。
        可以包含任何 HTML 或 Vue 组件。
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};
</script>

<style scoped>
/* 深度选择器，适用于 Vue 3 的 :deep() */
:deep(.el-collapse-item__header) {
  display: flex;
  align-items: flex-start; /* 箭头靠上对齐 */
  height: auto;
  min-height: 48px;
  line-height: normal;
  padding: 8px 0; /* 可选，调整内边距 */
}

/* 可选：如果标题文字和箭头之间距离太近，可以给标题加一个右边距 */
:deep(.custom-title) {
  margin-right: 24px;
  flex: 1;
}

/* 如果你使用了 icon 插槽来自定义图标，也可以这样控制 */
:deep(.el-collapse-item__arrow) {
  margin-top: 4px; /* 微调图标位置 */
}
</style>